<template>
  <div class="home">
    <header>温情key</header>
    <main>
      <div class="box-item">
        <div class="title">css动画-animation</div>
        <div class="content">
          steps()可以传入两个参数，第一个是一个大于0的整数，他是将间隔动画等分成指定数目的小间隔动画，也就是指定每个阶段分为几步来展示动画
          ，然后根据第二个参数来决定显示效果。第二个参数设置后
          其实和step-start，step-end同义，在分成的小间隔动画中判断显示效果。
        </div>
      </div>
      <div class="box-item box2">
        <div class="title">css动画-animation</div>
        <div class="content">
          steps()可以传入两个参数，第一个是一个大于0的整数，他是将间隔动画等分成指定数目的小间隔动画，也就是指定每个阶段分为几步来展示动画
          ，然后根据第二个参数来决定显示效果。第二个参数设置后
          其实和step-start，step-end同义，在分成的小间隔动画中判断显示效果。
        </div>
      </div>
    </main>
    <footer><a href="https://www.wenqingkey.cn" style="text-decoration: none;color: #fff;">www.wenqingkey.cn</a></footer>

    <div class="changeTheme" :style="{ right: openThemeCom === true ? '0' : '-310px' }">
      <div @click="chooseTheme">{{ openThemeCom === true ? "→" : "←" }}</div>
      <div @click="setThemeHandle('default')"></div>
      <div @click="setThemeHandle('dark')"></div>
      <div @click="setThemeHandle('red')"></div>
      <div @click="setThemeHandle('green')"></div>
      <div>
        <input type="color" :value="defaultColor" @input="chooseColor"/>
      </div>
    </div>
  </div>
</template>

<script>
import { setTheme } from "../theme/changeTheme";

export default {
  data() {
    return {
      // 选择主题组件开闭
      openThemeCom: false,
    };
  },
  computed: {
    // 取色器 默认颜色
    defaultColor() {
      /* 将 rgb 转换为 hex 值 */
      let color = localStorage.getItem("primaryColor").split(',');
      let hex = "#" + ((1 << 24) + (Number(color[0]) << 16) + (Number(color[1]) << 8) + Number(color[2])).toString(16).slice(1);
      // console.log(hex);
      return hex;
    }
  },
  created() {
    this.initTheme();
  },
  methods: {
    /* 初始化主题 */
    initTheme() {
      setTheme();
    },
    /* 选择主题组件显示/隐藏 */
    chooseTheme() {
      this.openThemeCom = !this.openThemeCom;
    },
    /* 切换主题 */
    setThemeHandle(val) {
      setTheme(val);
    },
    /* 自定义主题 */
    chooseColor(val) {
      // hex 转换为 rgb
      let hex = val.target.value;
      let r = parseInt('0x' + hex.slice(1, 3));
      let g = parseInt('0x' + hex.slice(3, 5));
      let b = parseInt('0x' + hex.slice(5, 7));
      let newPrimaryColor = `${r},${g},${b}`;
      // console.log(newPrimaryColor);
      localStorage.setItem("primaryColor", newPrimaryColor);
      setTheme();
    },
  },
};
</script>
<style lang="less" scoped>
.home {
  widows: 100vw;
  height: 100vh;
  display: grid;
  grid-template-rows: 50px 1fr 50px;
  background: #eee;
  header,
  footer {
    width: 100vw;
    height: 50px;
    background: rgba(@themeColor, 1);
    text-align: center;
    line-height: 50px;
    font-size: 1.6em;
    color: #fff;
  }

  main {
    padding: 10px;
    .box-item {
      border: 1px solid #555;
    }
    .box2 {
      margin-top: 20px;
    }
    .title {
      padding: 6px;
      color: rgba(@themeColor, 1);
      font-size: 1.3em;
      border-bottom: 1px solid #555;
    }
    .content {
      padding: 10px;
      background: rgba(@themeColor, 0.2);
    }
  }

  .changeTheme {
    position: fixed;
    bottom: 70px;
    right: 0;
    height: 40px;
    width: 360px;
    background: #fff;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    column-gap: 5px;
    transition: 0.3s ease;
    div {
      position: relative;
    }
    div::after {
      display: inline-block;
      width: 60px;
      height: 20px;
      text-align: center;
      line-height: 20px;
      position: absolute;
      top: -22px;
      left: 0;
    }
    div:nth-child(1) {
      line-height: 40px;
      text-align: center;
    }
    div:nth-child(2) {
      background: rgb(100, 149, 237);
    }
    div:nth-child(2)::after {
      content: "默认";
    }
    div:nth-child(3) {
      background: rgb(0, 0, 0);
    }
    div:nth-child(3)::after {
      content: "暗黑";
    }
    div:nth-child(4) {
      background: rgb(247, 72, 72);
    }
    div:nth-child(4)::after {
      content: "鲜红";
    }
    div:nth-child(5) {
      background: rgb(59, 235, 115);
    }
    div:nth-child(5)::after {
      content: "草绿";
    }
    div:nth-child(6)::after {
      content: "自定义";
    }
  }
}
</style>
